【CSS-task-06】

什么是css sprites

小课堂【北京第26期】

分享人：杨超

目录

1.背景介绍

2.知识剖析

3.常见问题

4.解决方案

5.编码实战

6.扩展思考

7.参考文献

8.更多讨论

1.背景介绍

CSS Sprites即CSS雪碧图，也有人叫它CSS精灵，是一种CSS图像合并技术。

2.知识剖析

管中窥豹，可见一斑

CSS雪碧的基本原理是把你的网站上用到的一些图片整合到一张单独的图片中,然后利用css的背景定位来显示需要显示的图片部分。

问题

问题1:如何制作雪碧图

问题2:如何使用雪碧图

4.解决方案

如何制作雪碧图?

(1)用Photoshop等工具拼图

(2)用软件拼图

5.编码实战

                
                    background-image:url(sprites.jpg)
                    background-position:
                
            

6.扩展思考

雪碧图有什么优缺点？

使用优点

(1)减少加载网页图片时对服务器的请求次数

(2)提高页面的加载速度

使用缺点

(1)内存使用

(2)影响浏览器的缩放功能

(3)拼图维护比较麻烦

(4)夜间模式下可能会出现问题

7.参考文献

参考一：CSS Sprite雪碧图应用

8.更多讨论

是否可以通过雪碧图实现一些简单的交互效果？

鸣谢

感谢大家观看

BY : 杨超